<!DOCTYPE html>
<div *ngIf="viewDetailIdea" id="ideaModalWindow">
    <div class="col-md-7 modalcontentLeft">
        <div class="modalcontentLeftContainer">
            <h3>{{viewDetailIdea.title}}<h5><span class="ideacommentDate">Posted on: {{formateDate(viewDetailIdea.createdAt)}} </span><br/><span
                    class="userNameModal" [ngClass]="{'clickPointer': clickPointer}">-{{viewDetailIdea.name}}</span>
            </h5></h3>
            <br/>
            <div [innerHTML]="switchTags(viewDetailIdea.content)" class="modalcontentLeftdescription"></div>
            <div *ngIf="versioning">
                <div class="newIdeaOfCitation"
                     *ngIf="viewDetailIdea.citation && viewDetailIdea.citation != 'undefined' && viewDetailIdea.citation.name!==''">
                    <span *ngIf="viewDetailIdea.citationArray"> Citation Tree : </span>
                    [{{viewDetailIdea.citation.showCount}}: {{viewDetailIdea.citation.name}},
                    {{formateDate(viewDetailIdea.citation.updatedAt).split(" ")[0]}}]
                </div>
            </div>
        </div>
        <div class="listTagsformodel">
            <ul>
                <li *ngFor="let tags of viewDetailIdea.tags">{{tags}}</li>
            </ul>
        </div>

    </div>
    <div class="col-md-5 modalcontentRight">
        <div class="col-md-12 modalcontentRightrow">
            <div>
                <textarea [(ngModel)]="cardcommentinput" [disabled]="modalPostComment" type="text"
                          class="modalcontentRightComment" placeholder="Write a comment..."
                          (keypress)="onKeyPressViewCard($event)"></textarea>
            </div>
            <div class="commentDiv">
                <button type="submit" class="btn btn-primary postCommentButton"
                        (click)="addcardComment(cardcommentinput,viewDetailIdea)">Post
                </button>
            </div>
            <div class="modalContainerlikecomment">
                <div class="icons-list">
                    <div class="col-md-12 commentFooters">
                        <div class="col-md-2 commentFooter">
                            <i [ngClass]="{'likeClicked':viewDetailIdea.isliked}"
                                                               class="ion-thumbsup chatbox"
                                                               (click)="likesCount(viewDetailIdea)"></i>
                            <!--{{viewDetailIdea.likes}}-->
                        </div>
                        <div class="col-md-2 commentFooter dislikeDivs"><i
                                [ngClass]="{'likeClicked':viewDetailIdea.isdisliked}" class="ion-thumbsdown chatbox"
                                (click)="dislikesCount(viewDetailIdea)"></i>
                            <!--{{viewDetailIdea.dislikes}}-->
                        </div>
                        <div class="col-md-2 commentFooter pointsDivs"><i class="ion-android-star chatbox"></i>
                            {{viewDetailIdea.points}}
                        </div>
                        <div class="col-md-2 commentFooter" [ngClass]="{'iFavourite': viewDetailIdea.isfavorite}"><i
                                class="ion-heart heart" (click)="favouriteCount(viewDetailIdea)"></i></div>
                        <div class="col-md-2 commentFooter commentDivs"><i class="ion-chatboxes chatbox"></i>
                            {{viewDetailIdea.data.commentCount}}
                        </div>
                        <div class="col-md-2 commentFooter abuseDivs"
                             [ngClass]="{'abusing': viewDetailIdea.isAbused , 'avoid-clicks':viewDetailIdea.isAbused}"
                             (click)="setAbuse(viewDetailIdea);"><i class="ion-alert-circled"></i></div>
                    </div>
                </div>
            </div>

            <div class="col-md-12 modalContainercomments">
                <div class="modalcontentComments" *ngFor="let cardcomments of viewDetailIdea.data.commentList">
                    <div *ngIf="true">
                        <span class="deleteComment" *ngIf="cardcomments.isOwner"
                              (click)="deleteModalOpen(cardcomments)"><i class="fa fa-times-circle"
                                                                         aria-hidden="true"></i></span>
                        <div>
                            <span class="modelcontentcomments" [innerHTML]="cardcomments.comment"></span><br>
                            <span class="modalcontentauthor">-{{cardcomments.name}}</span>
                            <span class="modalcontentDate">{{cardcomments.timeAgo}}</span><br>
                        </div>

                    </div>


                </div>
                <div *ngIf="!viewDetailIdea.data.commentCount">
                    <div class="noCommentYet">No Comment Yet</div>
                </div>
                <br/>
                <div *ngIf="viewDetailIdea.data.commentCount>6" [ngClass]="{'viewMoreComment':viewMoreComment}"
                     (click)="getMoreComment(viewDetailIdea)" class="modalcontentseeMore">See More
                </div>


            </div>

        </div>
    </div>

    <div *ngIf="deleteModal" class="deleteModal">
        <div class="delete-modal-content">
            <span class="deleteClose" (click)="deleteModal=false"><i class="ion-close-round"></i></span>
            <p class="deleteCommentTitle">Click on confirm to delete the comment?</p>
            <div class="deleteButtons">
                <button class="btn btn-default btn-auth postbutton deleteOk" (click)="deleteComment(viewDetailIdea)">
                    Confirm
                </button>
                <button (click)="deleteModal=false" class="btn btn-default btn-auth postbutton deleteCancel">Cancel
                </button>
            </div>
        </div>
    </div>
    <div class="citationTreedialog">
        <modal #citationTreedialog>
            <modal-header>
                <div id="tree-simpl" style="width:100%; height: 100%;"></div>
            </modal-header>
        </modal>
    </div>
</div>


